<template>
  <a-space>
    <c-tags
      v-if="type == 'tags'"
      class="contract-status"
      :data="[
        {
          label: $getEnum(status, flag),
          color: color
        }
      ]"
    ></c-tags>
    <span v-if="type == 'text'" :class="color ? color : 'gray'">{{
      $getEnum(status, flag)
    }}</span>
  </a-space>
</template>

<script>
import { contractState } from "@/dict/contract";
export default {
  props: {
    flag: {
      type: Number
    },
    type: {
      type: String
    }
  },
  computed: {
    color() {
      let res;
      this.flag === this.status.notSigned.value // 双方未签署
        ? (res = "red")
        : this.flag === this.status.buyerNotSigned.value // 买家未签署
        ? (res = "pink")
        : this.flag === this.status.sellerNotSigned.value // 卖家未签署
        ? (res = "orange")
        : this.flag === this.status.signed.value // 已签署
        ? (res = "green")
        : this.flag === this.status.canceled.value // 已取消
        ? (res = "")
        : (res = "blue");
      return res;
    }
  },
  data() {
    return {
      status: contractState
    };
  }
};
</script>
<style lang="scss" scoped>
.red {
  color: #f5222d;
}
.pink {
  color: #eb2f96;
}
.orange {
  color: #fa8c16;
}
.green {
  color: #52c41a;
}
.blue {
  color: #4d65fd;
}
.gray {
  color: rgb(101 99 99 / 65%);
}
</style>
